<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>数据统计</title>
    <link href="/assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-5">
        <div class="row">
            <div class="col-md-10 offset-md-1">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">课程教学总结数据统计</h3>
                    </div>
                    <div class="card-body">
                        <!-- 过滤表单 -->
                        <div class="card mb-4">
                            <div class="card-header">过滤条件</div>
                            <div class="card-body">
                                <form method="get">
                                    <div class="row g-3">
                                        <div class="col-md-2">
                                            <label class="form-label">学期</label>
                                            <select class="form-select" name="semester">
                                                <option value="">所有学期</option>
                                                <option th:each="sem : ${semesters}" 
                                                        th:value="${sem}" 
                                                        th:text="${sem}"
                                                        th:selected="${sem == currentSemester}">
                                                    2022-2023-1
                                                </option>
                                            </select>
                                        </div>
                                        <div class="col-md-3">
                                            <label class="form-label">课程名称</label>
                                            <input type="text" class="form-control" name="course" th:value="${param.course}">
                                        </div>
                                        <div class="col-md-3">
                                            <label class="form-label">教师姓名</label>
                                            <input type="text" class="form-control" name="teacher" th:value="${param.teacher}">
                                        </div>
                                        <div class="col-md-3">
                                            <label class="form-label">最低重复度(%)</label>
                                            <input type="number" class="form-control" min="0" max="100"
                                                name="minSimilarity" th:value="${param.minSimilarity}"
                                                placeholder="输入0-100之间的数值">
                                        </div>
                                        <div class="col-md-1 d-flex align-items-end">
                                            <button type="submit" class="btn btn-primary w-100">筛选</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    
                        <div class="row mb-4">
                            <div class="col-md-6">
                                <div class="card bg-primary text-white">
                                    <div class="card-body text-center">
                                        <h5 class="card-title">课程教学总结数量</h5>
                                        <p class="card-text display-6" th:text="${totalRecords}">0</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="card bg-success text-white">
                                    <div class="card-body text-center">
                                        <h5 class="card-title">课程数</h5>
                                        <p class="card-text display-6" th:text="${courseCount}">0</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <h4>学期分布</h4>
                        <div class="table-responsive mb-4">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>学期</th>
                                        <th>课程教学总结数量</th>
                                        <th>占比</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr th:each="entry : ${semesterStats}">
                                        <td th:text="${entry.key}">2022-2023-1</td>
                                        <td th:text="${entry.value}">100</td>
                                        <td th:text="${#numbers.formatPercent(entry.value / totalRecords, 1, 2)}">10.00%</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        
                        <!-- 详细对比结果 -->
                        <h4 class="mt-4">课程对比详细结果</h4>
                        <div class="table-responsive">
                            <div class="form-inline mb-3">
                                <label class="me-2">每页显示：</label>
                                <select class="form-select form-select-sm" style="width: auto;"
                                        onchange="changePageSize(this)">
                                    <option value="20" th:selected="${page.size == 20}">20</option>
                                    <option value="50" th:selected="${page.size == 50}">50</option>
                                    <option value="100" th:selected="${page.size == 100}">100</option>
                                </select>
                            </div>
                            <div class="accordion" id="detailedResults">
                                <div class="accordion-item" th:each="result,stat : ${detailedResults}">
                                    <h2 class="accordion-header">
                                        <button class="accordion-button collapsed" type="button"
                                                data-bs-toggle="collapse"
                                                th:data-bs-target="'#collapse' + ${stat.index}">
                                            <div class="container-fluid p-0">
                                                <div class="row">
                                                    <div class="col-6">
                                                        <div class="small">
                                                            <div class="fw-bold" th:text="${result.zjA.xueqi + ' - ' + result.zjA.course}">2022-1 - 课程A</div>
                                                            <div class="text-muted" style="font-size: 0.85em;"
                                                                 th:text="${'教学班：' + result.zjA.tclass + ' | 教员：' + result.zjA.teacher}">
                                                                教学班A | 教员A
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-6">
                                                        <div class="small">
                                                            <div class="fw-bold" th:text="${result.zjB.xueqi + ' - ' + result.zjB.course}">2022-1 - 课程B</div>
                                                            <div class="text-muted" style="font-size: 0.85em;"
                                                                 th:text="${'教学班：' + result.zjB.tclass + ' | 教员：' + result.zjB.teacher}">
                                                                教学班B | 教员B
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </button>
                                    </h2>
                                    <div th:id="'collapse' + ${stat.index}" class="accordion-collapse collapse"
                                         data-bs-parent="#detailedResults">
                                        <div class="accordion-body">
                                            <table class="table table-bordered">
                                                <thead class="table-light">
                                                   <tr>
                                                       <th>对比项</th>
                                                       <th>编辑距离相似度</th>
                                                       <th>最长公共子序列</th>
                                                   </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>教学方法</td>
                                                        <td th:text="${#numbers.formatPercent(result.jxffSimilarity3, 1, 2)}">-</td>
                                                        <td th:text="${#numbers.formatPercent(result.jxffSimilarity4, 1, 2)}">-</td>
                                                    </tr>
                                                    <tr>
                                                        <td>形成性考核</td>
                                                        <td th:text="${#numbers.formatPercent(result.xcxfxSimilarity3, 1, 2)}">-</td>
                                                        <td th:text="${#numbers.formatPercent(result.xcxfxSimilarity4, 1, 2)}">-</td>
                                                    </tr>
                                                    <tr>
                                                        <td>试卷分析</td>
                                                        <td th:text="${#numbers.formatPercent(result.sjfxSimilarity3, 1, 2)}">-</td>
                                                        <td th:text="${#numbers.formatPercent(result.sjfxSimilarity4, 1, 2)}">-</td>
                                                    </tr>
                                                    <tr>
                                                        <td>成绩分析</td>
                                                        <td th:text="${#numbers.formatPercent(result.cjfxSimilarity3, 1, 2)}">-</td>
                                                        <td th:text="${#numbers.formatPercent(result.cjfxSimilarity4, 1, 2)}">-</td>
                                                    </tr>
                                                    <tr>
                                                        <td>教学总结</td>
                                                        <td th:text="${#numbers.formatPercent(result.zjSimilarity3, 1, 2)}">-</td>
                                                        <td th:text="${#numbers.formatPercent(result.zjSimilarity4, 1, 2)}">-</td>
                                                    </tr>
                                                    <tr>
                                                        <td>意见建议</td>
                                                        <td th:text="${#numbers.formatPercent(result.yjjySimilarity3, 1, 2)}">-</td>
                                                        <td th:text="${#numbers.formatPercent(result.yjjySimilarity4, 1, 2)}">-</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 分页导航 -->
                        <div class="d-flex justify-content-between align-items-center mt-4">
                            <nav th:if="${page.totalPages > 0}" th:with="
                                currentCourse=${param.course},
                                currentTeacher=${param.teacher},
                                currentMinSimilarity=${param.minSimilarity}
                            ">
                                <ul class="pagination justify-content-center mb-0">
                                    <li class="page-item" th:classappend="${page.first} ? 'disabled'">
                                        <a class="page-link" th:href="@{/statistics(page=1,size=${page.size},course=${currentCourse},teacher=${currentTeacher},minSimilarity=${currentMinSimilarity})}" aria-label="首页">
                                            <span aria-hidden="true">&laquo;</span>
                                        </a>
                                    </li>
                                    <li class="page-item" th:classappend="${page.first} ? 'disabled'">
                                        <a class="page-link"
                                            th:href="@{/statistics(page=${page.number},size=${page.size},course=${currentCourse},teacher=${currentTeacher},minSimilarity=${currentMinSimilarity})}"
                                            aria-label="上一页">
                                            <span aria-hidden="true">&lsaquo;</span>
                                        </a>
                                    </li>
                                    
                                    <!-- Modified pagination logic -->
                                    <!-- Show first page -->
                                    <li class="page-item" th:classappend="${page.number + 1 == 1} ? 'active'" th:if="${page.totalPages > 0}">
                                        <a class="page-link" th:href="@{/statistics(page=1,size=${page.size},course=${currentCourse},teacher=${currentTeacher},minSimilarity=${currentMinSimilarity})}">1</a>
                                    </li>
                                    
                                    <!-- Show ellipsis if needed -->
                                    <li class="page-item disabled" th:if="${page.number > 3}">
                                        <span class="page-link">...</span>
                                    </li>
                                    
                                    <!-- Show current page -2 if applicable -->
                                    <li class="page-item" th:if="${page.number > 1}" th:classappend="${page.number + 1 == page.number - 1} ? 'active'">
                                        <a class="page-link" th:href="@{/statistics(page=${page.number - 1},size=${page.size},course=${currentCourse},teacher=${currentTeacher},minSimilarity=${currentMinSimilarity})}" 
                                           th:text="${page.number - 1}">3</a>
                                    </li>
                                    
                                    <!-- Show current page -1 if applicable -->
                                    <li class="page-item" th:if="${page.number > 0}" th:classappend="${page.number + 1 == page.number} ? 'active'">
                                        <a class="page-link" th:href="@{/statistics(page=${page.number},size=${page.size},course=${currentCourse},teacher=${currentTeacher},minSimilarity=${currentMinSimilarity})}" 
                                           th:text="${page.number}">4</a>
                                    </li>
                                    
                                    <!-- Current page -->
                                    <li class="page-item active" th:if="${page.number + 1 != 1 && page.number + 1 != page.totalPages}">
                                        <a class="page-link" th:href="@{/statistics(page=${page.number + 1},size=${page.size},course=${currentCourse},teacher=${currentTeacher},minSimilarity=${currentMinSimilarity})}" 
                                           th:text="${page.number + 1}">5</a>
                                    </li>
                                    
                                    <!-- Show current page +1 if applicable -->
                                    <li class="page-item" th:if="${page.number + 2 <= page.totalPages}" th:classappend="${page.number + 1 == page.number + 2} ? 'active'">
                                        <a class="page-link" th:href="@{/statistics(page=${page.number + 2},size=${page.size},course=${currentCourse},teacher=${currentTeacher},minSimilarity=${currentMinSimilarity})}" 
                                           th:text="${page.number + 2}">6</a>
                                    </li>
                                    
                                    <!-- Show current page +2 if applicable -->
                                    <li class="page-item" th:if="${page.number + 3 <= page.totalPages}" th:classappend="${page.number + 1 == page.number + 3} ? 'active'">
                                        <a class="page-link" th:href="@{/statistics(page=${page.number + 3},size=${page.size},course=${currentCourse},teacher=${currentTeacher},minSimilarity=${currentMinSimilarity})}" 
                                           th:text="${page.number + 3}">7</a>
                                    </li>
                                    
                                    <!-- Show ellipsis if needed -->
                                    <li class="page-item disabled" th:if="${page.number + 4 < page.totalPages}">
                                        <span class="page-link">...</span>
                                    </li>
                                    
                                    <!-- Show last page -->
                                    <li class="page-item" th:classappend="${page.number + 1 == page.totalPages} ? 'active'" th:if="${page.totalPages > 1 && page.number + 1 != page.totalPages}">
                                        <a class="page-link"
                                            th:href="@{/statistics(page=${page.totalPages},size=${page.size},course=${currentCourse},teacher=${currentTeacher},minSimilarity=${currentMinSimilarity})}"
                                            th:text="${page.totalPages}">100</a>
                                    </li>
                                    
                                    <li class="page-item" th:classappend="${page.last} ? 'disabled'">
                                        <a class="page-link"
                                            th:href="@{/statistics(page=${page.number + 2},size=${page.size},course=${currentCourse},teacher=${currentTeacher},minSimilarity=${currentMinSimilarity})}"
                                            aria-label="下一页">
                                            <span aria-hidden="true">&rsaquo;</span>
                                        </a>
                                    </li>
                                    <li class="page-item" th:classappend="${page.last} ? 'disabled'">
                                        <a class="page-link"
                                            th:href="@{/statistics(page=${page.totalPages},size=${page.size},course=${currentCourse},teacher=${currentTeacher},minSimilarity=${currentMinSimilarity})}"
                                            aria-label="尾页">
                                            <span aria-hidden="true">&raquo;</span>
                                        </a>
                                    </li>
                                </ul>
                            </nav>
                            <a href="/" class="btn btn-primary">返回首页</a>
                        </div>

                        <script>
                        function changePageSize(select) {
                            const params = new URLSearchParams(window.location.search);
                            params.set('size', select.value);
                            params.set('page', 1);
                            window.location.search = params.toString();
                        }
                        </script>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script src="/assets/bootstrap/js/bootstrap.bundle.min.js"></script>
</body>
</html>
